<html>
    <head>
    <title>Canvas Animation</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="test_style.css">
	</head>
    <body>
	
	<div class = "game_div">
		<div class="div1">
			<canvas id="canvas" width="600" height="600"></canvas>
		</div>
		<div class="score">
			<div><text>SCORE : </text><input id="score" value = "0" class = "score_input"></input></div>
		</div>
		<div class="parameters">
			<div><text>TIME : </text><input id="time_left" value = "1000"></input></div>
		</div>
		<div class="div2">
			<canvas id="time_canvas" width="600" height="50"></canvas>
		</div>
	</div>
	<div class = "table_div">
		<div class="best">
			<div><text class = "best_score">BEST : </text><input id="best" value = "0" class = "best_score_input"></input></div>
		</div>
		<div class = "score_table_div">
			<table id = "score_table">
				<tr>
					<th class = "score_table_th">GEN</th>
					<th class = "score_table_th">SCORE</th>
				</tr>
			</table>
		</div>
		<div class = "Q_table_div">
			<table id = "q_table">
				<tr>
					<th class = "q_table_th">STA</th>
					<th class = "q_table_th">UP</th>
					<th class = "q_table_th">DOWN</th>
					<th class = "q_table_th">LEFT</th>
					<th class = "q_table_th">RIGHT</th>
				</tr>
			</table>
		</div>
	</div>
		<script type="text/javascript" src = "script.js"></script>
    </body>
</html>
